<script setup>
  import { ref, onMounted } from 'vue'
  import { truckInfoAPI } from '@/apis/user'
  onMounted(() => {
    getTruckInfo()
  })
  const truckInfo = ref({})
  const truckInfoImg = ref([])
  const getTruckInfo = async () => {
    const { data } = await truckInfoAPI()
    truckInfo.value = data
    truckInfoImg.value = data.pictureList
  }
</script>

<template>
  <view class="page-container">
    <swiper
      class="truck-pictures"
      indicator-active-color="#fff"
      circular
      indicator-dots
    >
      <swiper-item v-for="item in truckInfoImg">
        <image class="picture" mode="aspectFill" :src="item.url"></image>
      </swiper-item>
    </swiper>
    <view class="truck-meta">
      <uni-list :border="false">
        <uni-list-item
          :border="false"
          title="车辆编号"
          :rightText="truckInfo.id"
        />
        <uni-list-item
          :border="false"
          title="车辆号牌"
          :rightText="truckInfo.licensePlate"
        />
        <uni-list-item
          :border="false"
          title="车型"
          :right-text="truckInfo.truckType"
        />
        <uni-list-item
          :border="false"
          title="所属机构"
          :rightText="truckInfo.currentOrganName"
        />
        <uni-list-item
          :border="false"
          title="载重"
          :rightText="truckInfo.allowableLoad + '吨'"
        />
      </uni-list>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  @import './index.scss';
</style>
